<script setup>
import _ from 'lodash';

import Config from '@core/engine/Config';
import SubViewContainer from '@core/components/subLayout/SubViewContainer.vue';
import packageConfig from '@/../package.json';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });
const versionMap = packageConfig.dependencies;
const dependencies = [
  { name: 'qiankun', version: '^2.8.1' },
  { name: 'Vue', version: versionMap.vue.source },
  { name: 'Vite', version: versionMap.vite.source },
  { name: 'TypeScript', version: versionMap.typescript.source },
  { name: 'JSX', version: versionMap['@vitejs/plugin-vue-jsx'].source },
  { name: 'Element UI', version: versionMap['element-plus'].source },
  { name: 'Vue Router', version: versionMap['vue-router'].source },
  { name: 'Pinia', version: versionMap.pinia.source },
  { name: 'Vue I18n', version: versionMap['vue-i18n'].source },
  { name: 'Sass', version: versionMap.sass.source },
  { name: 'Lodash', version: versionMap.lodash.source },
  { name: 'axios', version: versionMap.axios.source },
  { name: 'dayjs', version: versionMap.dayjs.source },
  { name: 'ESLint', version: versionMap.eslint.source },
  { name: 'Stylelint', version: versionMap.stylelint.source },
];
const links = [
  { title: 'readme', href: 'https://gitlab.ctyun.cn/cns-frontend/cloud-native-security-frontend/-/blob/develop/README.md' },
  { title: 'gitlabGroup', href: 'https://gitlab.ctyun.cn/cns-frontend' },
  { title: 'issues', href: 'https://gitlab.ctyun.cn/cns-frontend/cloud-native-security-frontend/-/issues' },
  { title: 'releases', href: 'https://gitlab.ctyun.cn/cns-frontend/cloud-native-security-frontend/-/releases' },
];
const availableSubApps = ref([]);
const isSubAppsLoading = ref(true);

onMounted(async () => {
  isSubAppsLoading.value = true;
  const appConfig = await Config.fetchPublic();
  availableSubApps.value = appConfig.availableSubApps;
  isSubAppsLoading.value = false;
});
</script>

<template>
  <SubViewContainer>
    <ElCard class="home-index">
      <ElResult icon="info" :title="t('pageTitle')">
        <template #sub-title>
          <div class="dependencies">
            <ElTag v-for="item in dependencies" :key="item.name" class="item" effect="light">
              {{item.name}} @ {{item.version}}
            </ElTag>
          </div>
        </template>
        <template #extra>
          <block v-for="(item, index) in links" :key="item.title">
            <ElLink class="link" type="info" :href="item.href">
              {{t(item.title)}}
            </ElLink>
            <ElDivider v-if="index < links.length - 1" direction="vertical" />
          </block>
        </template>
      </ElResult>
      <div v-loading="isSubAppsLoading" class="sub-apps">
        {{t('subApps')}}
        <ElTag v-for="item in availableSubApps" :key="item" class="sub-app">{{_.startCase(item)}}</ElTag>
      </div>
    </ElCard>
  </SubViewContainer>
</template>

<i18n lang="yaml" locale="zh-CN">
  pageTitle: 云安全前端框架
  readme: README
  gitlabGroup: GitLab 群组
  issues: Issue List
  releases: Releases
  subApps: 子应用
</i18n>

<style lang="scss" scoped>
.home-index {
  display: flex;
  justify-content: center;
}

.dependencies {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  width: 50vw;
  margin-top: 24px;

  .item {
    margin: 0 12px 8px 0;
  }
}

.sub-apps {
  display: flex;
  flex-direction: column;
  align-items: center;

  .sub-app {
    margin-top: 8px;
  }
}
</style>
